<!--
 * @Author: HaoyangDu@wits.com
 * @description: 
 * @param: 
 * @return: 
-->
<template>
  <img src="./img/bg.png" alt="" class="bg" />
  <img src="./img/logo.png" alt="" class="logo" />
  <img src="./img/Back.png" alt="" class="icon" />
  <div class="topSitting">头部占位</div>
  <div class="formArea">
    <up-form customStyle="margin:0" :model="login">
      <up-form-item prop="workNum">
        <up-input
          v-model="login.workNum"
          border="none"
          placeholderStyle="color:#999999;opacity:0.85;"
          placeholder="请输入工号"
        ></up-input>
      </up-form-item>
      <up-form-item prop="pwd">
        <up-input
          v-model="login.pwd"
          border="none"
          placeholderStyle="color:#999999;opacity:0.85;"
          placeholder="请输入密码"
        ></up-input>
      </up-form-item>
      <up-form-item prop="msgCode">
        <up-input
          v-model="login.msgCode"
          border="none"
          placeholderStyle="color:#999999;opacity:0.85;"
          placeholder="请输入短信验证码"
        >
          <template #suffix>
            <div
              class="getCode"
              :class="isDisabled ? 'disabled' : ''"
              @click="getMsgCode"
            >
              {{ isDisabled ? msgCodeText + "s" : "获取验证码" }}
              <div class="getCodeBg"></div>
            </div>
          </template>
        </up-input>
      </up-form-item>
    </up-form>
  </div>
  <div class="bottomLine"></div>
  <div class="loginBtn" @click="goLogin">登录</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import * as http from "../../utils/http";
import * as utils from "../../utils/utils";
const login = reactive({
  workNum: "A99991",
  pwd: "Adm@123456",
  msgCode: "",
});
// 短信按钮是否被禁用
const isDisabled = ref(false);
// 短信验证码按钮文字
const msgCodeText = ref(0);
// 获取短信验证码
const getMsgCode = () => {
  if (login.workNum) {
    if (!isDisabled.value) {
      http
        .sendSmsCode({ userNo: login.workNum })
        .then((res) => {
          wx.showToast({
            title: "验证码发送成功",
            mask: "true",
            icon: "none",
            duration: 1000,
          });
          isDisabled.value = true;
          msgCodeText.value = 5;
          let timer = setInterval(() => {
            msgCodeText.value--;
            if (msgCodeText.value < 0) {
              isDisabled.value = false;
              clearInterval(timer);
            }
          }, 1000);
        })
        .catch((err) => {
          console.log(err);
          wx.showToast({
            title: err.message,
            mask: "true",
            icon: "none",
            duration: 1000,
          });
        });
    } else {
      wx.showToast({
        title: "请" + msgCodeText.value + "s后再试",
        icon: "none",
        mask: "true",
        duration: 1000,
      });
    }
  } else {
    wx.showToast({
      title: "请正确输入工号",
      icon: "none",
      mask: "true",
      duration: 1000,
    });
  }
};

import { useAppStore } from "../../store/index";
const store = useAppStore();
const goLogin = () => {
  if (login.workNum && login.pwd && login.msgCode) {
    http
      .login({
        userNo: login.workNum,
        password: login.pwd,
        verificationCode: login.msgCode,
      })
      .then((res) => {
        if (res.data.token) {
          // 存储token
          wx.setStorageSync("token", res.data.token);
          // 存储登陆时间
          store.setLoginTime(res.data.loginTime);
          // 存储userId
          store.setUserId(res.data.id);
          // 是否第一次登录
          if (res.data.isFirstLogin) {
            console.log(1);
            wx.reLaunch({
              url: "../updatePwd/updatePwd",
            });
          } else {
            wx.switchTab({
              url: "../../pages/index/index",
            });
          }
        }
      });
  } else {
    wx.showToast({
      title: "请正确输入登录信息",
      mask: "true",
      icon: "none",
      duration: 1000,
    });
  }
};
</script>

<style scoped lang="scss">
.topSitting {
  height: 520rpx;
  opacity: 0;
}
.bg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -9999;
}
.logo {
  width: 340rpx;
  height: 56rpx;
  position: absolute;
  left: 205rpx;
  top: 276rpx;
}
.icon {
  width: 291rpx;
  height: 72rpx;
  position: absolute;
  left: 63rpx;
  top: 422rpx;
}
.formArea {
  padding-left: 62rpx;
  padding-right: 84rpx;
  padding-bottom: 52rpx;
  .getCode {
    position: relative;
    width: 153rpx;
    height: 52rpx;
    line-height: 52rpx;
    border-radius: 26rpx;
    text-align: center;
    color: #406eb0;
    font-size: 24rpx;
    .getCodeBg {
      width: 100%;
      height: 100%;
      border-radius: 26rpx;
      background-color: #3a8ff8;
      opacity: 0.15;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -99;
    }
  }
  .disabled {
    opacity: 0.7;
  }
}
.bottomLine {
  height: 1rpx;
  margin-left: 50rpx;
  margin-right: 90rpx;
  background-color: #979797;
  opacity: 0.2;
}
.loginBtn {
  width: 590rpx;
  height: 88rpx;
  margin: 122rpx 80rpx;
  border-radius: 44rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #3277f2;
  color: #fff;
  opacity: 49%;
}
</style>
